昨天我們了解到 Material Theming 主題，提供了一套基本的主題樣式，在設計時可以觀察 Material 主題樣式的細節，甚至可以直接下載修改為符合品牌特色的主題，Material 主題包含顏色、文字樣式、形狀及圖示供您選擇，在不同主題也提供了許多小工具，在設計上能更快速的找到最適合品牌風格的搭配。
今天我們進入到 Material Design 中 Usability 易用性的章節，由於內容涵蓋的範圍較多較廣，我們會分成兩天來介紹，今天會先了解關於輔助功能這個部分，讓我們繼續看下去吧。
Accessibility 輔助功能
Bidirectionalit 雙向性
無障礙設計提供更多幫助，可以讓用戶了解和使用產品。無障礙設計不僅提高了產品的輔助功能也可以幫助視力較低、失明、聽力障礙、認知障礙、行動障礙或肢體障礙的用戶，並提高產品整體的可用性。
輔助功能通過清晰的排版設計和各種號召性用語來幫助用戶導覽。支援用於平台的輔助技術，例如: 支援觸摸、鍵盤和滑鼠的輸入法。輔助功能讓應用程式適用於各種用戶。
輔助功能主要適用於移動裝置介面設計。有關設計的詳細訊息或是簡易研發的產品訊息，請參考 Google 輔助功能網站。
輔助技術通過螢幕閱讀器、放大工具和助聽器等設備幫助用戶改善問題。
螢幕閱讀器使用盲文顯示器或朗讀文字，Google 的螢幕閱讀器 TalkBack，提供視力障礙、閱讀困難或暫時無法閱讀的人使用，螢幕閱讀器對可見內容進行口頭表達並大聲朗讀。螢幕閱讀器程式可以分辨段落和按鈕文字以及隱藏的內容，例如: 用於圖示和標題的替代文字，使用純文字說明內容提升使用螢幕閱讀器的用戶體驗。
螢幕閱讀器為用戶提供了多種瀏覽的方式，包括：
用戶可以在 "觸摸瀏覽" 和 "線性瀏覽" 兩種模式之間切換。
在頁面區塊使用適當的語義標記，輔助技術提供用戶在標記之間跳轉導覽，例如: 標題之間切換導覽。
當導覽非常方便時，用戶可以了解他們在應用中的位置以及重要的內容。為了強調重要訊息，在多種視覺和文字提示使用顏色、形狀、文字和動作增加訊息清晰度。視覺回饋（例如: 標籤、顏色和圖示）和觸摸回饋表現介面中可以使用的內容。
導覽以最少的步驟完成操作並且清楚顯示操控元件和標籤的位子。Focus control 焦點控制（控制鍵盤和讀取焦點的功能）用於經常使用的操作。
增加每個按鈕、圖片和文字行都會增加介面的複雜性。您可以使用以下方法讓介面更容易理解：
傳達項目的相對重要性：
為了使螢幕閱讀器能夠按照順序讀出內容，設計師與開發人員的合作顯得非常重要，在畫面設計上要依照內容結構的順序寫出 HTML，也要了解螢幕閱讀器將如何解釋畫面設計。
當 CSS ( 階層樣式表 ) 確定頁面的排版和外觀時，螢幕閱讀器依照裝置上 HTML 的內容結構朗讀，螢幕閱讀器在閱讀內容時遵循由左而右、從上至下的視覺閱讀順序。
依照視覺閱讀的順序排列元件，視覺焦點通常從螢幕的頂端閱讀至底端。排列元件的順序可以從最重要的項目排列到最不重要的項目。在畫面和任務之間引導視覺焦點可以提升連續的用戶體驗。如果任務被中斷然後又恢復，可以幫助視覺焦點回到先前的操做元素。在焦點和動作的搭配上請考慮：
依照標題組織內容，可以將項目歸類在視覺焦點的項目下分組。
顏色和對比度可以幫助用戶關看和了解應用程式的內容，提供用戶與正確的元件進行互動以及了解操作。顏色可以幫助傳達情緒、語氣和重要訊息。可以選擇主要色、次要色和強調色來支援各種元件。元件之間的色彩對比可以幫助弱視用戶查看和使用。
色彩對比度用於區分各種文字和非文字元件很重要。具有強烈對比的圖片更容易被看見。對於某些用戶來說，在明亮或昏暗條件下（例如: 在非常晴朗的白天或晚上），低對比度的圖片可能很難區分。
對比度表示一種顏色與另一種顏色的區別，通常比例數值為 1：1 或 21：1。比率中兩個數字之間的差異越大，顏色之間的亮度差異也越大。根據 World Wide Web Consortium（W3C）基於顏色的亮度（顏色光的強度），顏色與其背景之間的對比度範圍為 1-21 。
W3C 建議以下內文和圖片文字的對比度：
大尺寸文字 ( 18pt 標準字體 / 14pt粗體 ) 和圖形在背景下需有 3:1 的對比度， 小尺寸文字在背景下需有 4.5:1 的對比度。圖示或其他元件也應考慮使用上述推薦的對比度。
裝飾元件（例如品牌標誌或插圖）可能不符合 W3C 建議的對比度，但是如果裝飾元件具有重要作用（例如: 連接到網站）會比較容易顯示特色，因此不必刻意讓裝飾元件符合對比度。
對於色盲或是看不到顏色差異的用戶，增加其他設計元素可以幫助表達相同數量的訊息，元素採取不同的色彩形式設計（包括紅綠色，藍黃色和單色），以多種視覺傳達重要狀態。
筆觸、提示框、圖案、材質或文字等元素可以描述動作和內容，例如: 在輸入錯誤時使用紅色框線及提示文字告知用戶錯誤，如果只顯示紅色框可能會有部分用戶無法知道顏色而忽略錯誤。
Material Design 的觸摸目標準則可以幫助無法查看螢幕或使用小型裝置導致觸摸目標有困難的用戶點擊介面中的元件。
觸摸目標是螢幕上提供用戶輸入的部分，可觸摸範圍會超出元素的視覺範圍，提供用戶能更輕鬆的點擊觸摸。例如: 一個圖示尺寸為 24 x 24 dp，但可觸摸的完整範圍尺寸是 48 x 48 dp。
在大多數平台無論螢幕大小請使用 48 x 48 dp 的觸摸範圍，此尺寸的觸摸目標的物理尺寸約為 9mm。觸摸畫面元件的建議目標尺寸為7-10mm。為了提供更多用戶使用可以設定更大的觸摸範圍。在 iOS 上建議使用 44 x 44 pt 作為觸摸目標。有關特定平台指南，請參考開發人員資源頁面。
指示目標與觸摸目標相似，但是適用於使用動畫追蹤指示設備（例如: 滑鼠或觸控筆）。指示目標尺寸範圍最少為 44 x 44 dp。在大多數情況下可觸控目標間距相隔 8dp 或更多空間，可以促進平衡訊息密度和易用性。
靈活的響應式排版根據螢幕尺寸縮放內容，避免截斷無法完全顯示在特定設備或解析度上的內容，在畫面排版設計中，相關的主題項目可以相鄰排列提高可讀性。
為了提高閱讀的便利性，用戶可能會增加字體大小。手持設備和瀏覽器提供了調整系統字體大小功能。要在 Android 應用程式中調整系統字體大小、標記文字及其相關容器，以像素 （sp） 為單位調整。在調整字體大小時需要確保有足夠的空間容納大尺寸字體和其他語系字體。有關 其他語系字體大小與行高的建議。
無障礙文字是指螢幕閱讀器軟體可以閱讀的文字，例如，Android 上的 Google TalkBack，iOS 上的 Apple VoiceOver 和桌面上的 Freedom Scientific JAWS。螢幕閱讀器會大聲閱讀畫面上的文字和元件，包含可見和不可見的替代文字。
無障礙文字包括可見文字（包括介面元件的標籤、按鈕、連結和表單上的文字）和沒有顯示在螢幕上的不可見描述（例如: 圖片的替代文字）。有時螢幕上的標籤可能會被文字覆蓋，藉此提供更多訊息。當可見和不可見文字都具有描述性和意義時，它可以幫助用戶閱讀螢幕上的標題或連結進行瀏覽。螢幕閱讀器可以幫助您測試輔助功能文字並確定可以增加文字的位置。
替代文字（Alt 文字）是將視覺介面轉換為純文字。替代文字是程式碼中的簡短標籤（最多 125 個字符），用於增加圖片描述。由於替代文字只適用於圖片，因此無需在替代文字中增加 "圖片" 或 "照片" 的字眼。如果圖片無法載入，則會顯示替代文字來表示。螢幕閱讀器會朗讀替代文字告訴用戶圖片的意涵，包括有目標的關鍵字，替代文字對於有視覺障礙的用戶非常有善，可以幫助用戶了解有關圖片的訊息。替代文字還可以提升搜索引擎（SEO）的效益。
使用替代文字來傳達圖片所表現的訊息，在撰寫替代文字時使用簡短及簡潔的用詞，提供用戶快速閱讀內容，在撰寫替代文字時也可以加入與產品相關的關鍵字，提升搜索引擎的效益，在描述圖片時不需包含圖片或照片的字眼，直接表達圖片的含意即可。
所有用戶都依靠文字來了解畫面資訊，圖片周圍的文字說明、相鄰的文字、替代文字都可以提供與圖片有關的輔助訊息，在設計時考慮無障礙功能。照片說明是圖片下方的文字，用於解釋圖片的更多訊息中是誰、是什麼以及何時何地。
相鄰圖片的文字或圖像說明文字，可以在敘述中解釋圖片。如果圖片相鄰的文字說明了含意，就可能不需要 alt 文字並且 alt 標籤可以留空（alt =””）。如果將 alt 標籤留空時請刪除圖片檔名。
螢幕閱讀器無法讀取圖片中嵌入的文字。如果圖像中有包含嵌入文字需要朗讀，則使用替代文字提供文字訊息。
替代文字和標題顯示不同的資訊。如果替代文字和標題重複相同的內容，螢幕閱讀器會直接朗讀聽起來重複的內容訊息，用戶必須聽完才能繼續了解接下來的內容。當相鄰文字和標題不能解釋圖片訊息（對於那些看不見圖片的人來說很重要）（例如: 顏色、大小和目標位置的描述）時，使用替代文字。
螢幕閱讀器會聲閱讀的每個介面元件，句子越短朗讀的速度也就越快，不要撰寫冗長且不簡潔的句子。螢幕閱讀器可以通過朗讀操控元件名稱或發出聲音來傳達操控元件的類型或狀態，因此在輔助文字內不需要撰寫操控元件的類型或狀態。
當使用者進行操作而未正確讀取操控元件的類型或狀態時，該操控元件的目標可能是自訂操控元件或設定不正確。
輔助功能通過朗讀動作表示元件或連結在被點擊時的功能，而不是描述元件的外觀。
輔助功能對於在數值或狀態之間切換的圖示，向用戶展示圖示來說明。例如: 如果心形圖示表示在我的最愛增加內容，則輔助功能可以說明 "增加到我的最愛" 或 "從我的最愛刪除"。
提供如何使用操控元件的輔助文字時，應考慮用戶可能使用鍵盤或其他設備進行瀏覽或操作。輔助性軟體為用戶提供正確的互動描述。( 例如: 用戶使用語音輸入時，輔助工具可以提供語音協助。 )
提示語音為不清楚的動作提供了額外的訊息。例如，Android 的 "雙擊選擇" 功能會提示用戶點擊兩次即可選擇。Android TalkBack 提供與元件有關的任何自訂操作。
要了解何時以及如何將輔助功能準則應用於圖片，必須了解圖片類型之間的差異。找出圖片是否需要滿足 色彩對比指南 並從說明中了解含意，確定圖片是裝飾性還是內容豐富的類型。
根據 W3C 中提到，裝飾性圖片不會增加訊息在頁面內容中。裝飾圖片有以下特點：
根據 W3C 中提到，內容豐富的圖片以簡短易懂的方式傳達了一個概念。訊息圖片有以下特點：：
訊息圖片具有必須元素和非必需元素。必須元素的大尺寸文字顏色對比度應為3：1，小尺寸文字顏色對比度應為4.5：1。插圖包含必須和非必需訊息：
根據 W3C 中提到，功能性圖片可以是標誌、圖示、按鈕內的圖片以及可操作的圖片（例如: 圖片連結）。功能性圖片的替代文字不同於其他類型的圖片的替代文字，因為功能性圖片替代文字描述的是圖片的功能，而不是圖片的內容或外觀。
當按鈕中的圖示或圖片具有特定功能時，請增加 alt 標籤以動作動詞（而非圖示名稱）說明功能。可以查看 Writing 提供更多輔助文字的訊息。
標誌可以在 alt 標籤中提供說明，標誌屬於一種獨特的功能性圖片，因為它們：
查閱 顏色和對比度 提供更多有關標誌和顏色對比的訊息。當標誌是文字連結的一部分並且屬於裝飾性的，而沒有任何功能時，請增加一個空值 alt 標籤（alt =””）。
當介面元件增加描述性標籤時，用戶可以使用聲音瀏覽產品介面。使用螢幕閱讀器（例如: 語言提示）並通過 接觸探索 ，當用戶觸摸螢幕上的介面元件時，標籤會被大聲朗讀。
螢幕閱讀器在以下情況下可能難以使用：
聲音的替代品，可以是聲音或其他音頻元件和警報（例如: 隱藏說明或提示文字）提供選擇。
Material Design 使用動畫來引導螢幕之間的焦點。區塊轉換的焦點可以提供用戶追蹤，不重要的元素在視覺中會失去焦點。為了提供對動畫和視覺敏感的用戶能更舒適地使用界面，Material Design 提供了動作指導並支援 W3C 中的以下內容：
定時控制: 可以將應用程式中的操控元件設定在一定時間後消失。例如: 開始播放影片五秒鐘後，播放控制案件會從螢幕中消失。
優先控制: 如果計時導致操控元件消失得太快，則用戶可能會錯過執行優先功能的操控元件。例如: TalkBack 大聲朗讀操控元件。將它們放在計時器上可以阻止輔助工具朗讀元件，但用戶可能無法理解操控元件上的功能。
開啟重要功能的操控元件可以提供用戶再次打開它們，或以其他方式執行相同的功能。了解更多組成。
通過使用標準平台操控元件和語義 HTML（在 Web 上），應用程式包含平台的輔助技術使用所需的標記和程式碼。滿足每個平台的輔助功能標準並支援輔助技術（包括路徑方式和結構）為用戶帶來快速的體驗。可以打開輔助功能測試您的設計。其他設計注意事項：
為了讓使用螢幕閱讀器的用戶知道哪些介面元件是可以觸碰的，螢幕閱讀器會大聲朗讀組件的名稱。所述 contentDescription 屬性可以被添加到組件中（例如: 按鈕、圖示和標籤）包含不可見的文字圖示。對於網頁應用請增 aria 標籤。
幫助文件中包含特殊輔助功能時請閱讀指南了解螢幕閱讀器與 Google 雲端硬碟 的準則。遵循這些輔助功能準則有助於提高應用程式的輔助功能的完善度，建議您還可以用下列方式進行測試與研究：
與使用輔助技術的用戶進行訪談，了解他們的需求，想要從應用程式中獲得什麼，他們使用了哪些工具以及如何使用它們。讓這些工具為他們提供更好得體驗。
輔助功能的章節內容真的非常冗長，堅持不懈看到這裡的你們真的很棒，先為自己鼓掌吧~ 這幾個章節整整花了三天的時間才寫完 ( 含淚 )，希望可以幫助到想要提升無障礙功能設計的大家。
今天我們了解到 Usability 易用性中輔助功能，無障礙設計提供更多幫助，通過螢幕閱讀器、放大工具和助聽器等設備幫助用戶用戶可以在 "觸摸瀏覽" 和 "線性瀏覽" 兩種模式之間切換，輔助功能透過改善問題讓用戶了解和使用產品並提高產品可用性。
明天讓我們繼續完成 Usability 易用性章節內的雙向性，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！
如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~
iThome鐵人賽
看影片追技術